<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>

<!-- <script src="./js/demo1.js" type="module"></script> -->

<!--
    如何在html页面中使用ES6模块化语法(ES6 Module)
    1. script引入外部JS文件 同时给脚本添加属性type="module" => 此脚本默认使用模块化语法
    2. 可以在一个js文件/脚本(type="module")中 引入另一个js 
        import "xxx"
        import {} from "xxx"  按需引入
-->
<script type="module">
    // ES6 模块的设计思想是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量。
    // ES6 中每一个js文件都是一个单独的模块 => 里面的变量和方法 默认都是局部的

    // 模块功能主要由两个命令构成：export和import。export命令用于规定模块的对外接口，import命令用于输入其他模块提供的功能。

    // 一个模块就是一个独立的文件。该文件内部的所有变量，外部无法获取。如果你希望外部能够读取模块内部的某个变量，就必须使用export关键字输出该变量

    // 模块化暴露的常见方式
    // 1. 在想要暴露的变量和方法的声明之前添加关键词 export
    // 2. 在export命令后 使用大括号指定所要输出的一组变量 (统一暴露)
    import { a, addA } from './js/demo1.js'
    console.log(a, addA)

    import { B, addB } from './js/demo2.js'
    console.log(B)

    import { c, addC, reduceC } from './js/demo3.js'
    addC()
    reduceC()
    console.log('---------------------------------------------')
</script>
<script type="module">
    import x from './js/demo3.js'//引入模块中的默认值(变量名可以自定义) x/y/z......
    console.log(x)
    console.log('---------------------------------------------')
</script>
<script type="module">
    import { a as A, addA } from './js/demo1.js' // a重名 Uncaught SyntaxError: Identifier 'a' has already Been declared
    import { B, addB as addBB } from './js/demo2.js'
    import { c, addC, reduceC } from './js/demo3.js'

    var a = 100
    console.log(a, A, B,addBB)




</script>

</html>